let path = require('path')
let html = require('html-webpack-plugin')
let { CleanWebpackPlugin } = require('clean-webpack-plugin')
let terser = require('terser-webpack-plugin')
let cssExtract = require('mini-css-extract-plugin')
let webpack = require('webpack')

// 压缩css的插件 使用在 optimization的minimizer属性中
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, "app"),
    filename: 'index.[contenthash:8].js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new html({
      template: './public/index.html'
    }),
    new cssExtract(),
    new webpack.IgnorePlugin({
      //  告诉webpack 在解析 moment的时候 忽略 里边locale文件夹
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ],
  module: {
    noParse: /jquery/,
    rules: [
      {
        test: /\.css$/,
        // use: [ 'thread-loader',cssExtract.loader, 'css-loader']
        use: [cssExtract.loader, 'css-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader?cacheDirectory'] //告诉babel-loader可以使用缓存
      }
    ]
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new terser()
    ],
    splitChunks: {
      cacheGroups: {
        myjq_mom: {
          filename: 'myjqery_moment',
          test: /jquery|moment/,
          chunks: 'initial'
        }
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      "util": path.resolve(__dirname, 'src/util'),
      "page": path.resolve(__dirname, 'src/page'),
      "component": path.resolve(__dirname, 'src/component')
    },
    //  import './qqq' 
    extensions: ['.js', '.json', '.vue', '.jsx', '.tsx', '.css'],
    modules: [path.resolve(__dirname, 'src/plugins'), 'node_modules'],
  },
  externals: {
    axios: 'axios',
    // jquery: 'jQuery',
    //属性名：属性值
    // 属性名是我们在资源代码编写的时候的 导入名字
    // 属性值 是 通多script的src引入的文件创造的全局变量
  },
}


/*
optimization: {
        splitChunks: {
            chunks: "all",//默认作用于异步chunk，值为all/initial/async
            minSize: 30000,  //默认值是30kb,代码块的最小尺寸
            minChunks: 1,  //被多少模块共享,在分割之前模块的被引用次数
            maxAsyncRequests: 5,  //按需加载最大并行请求数量
            maxInitialRequests: 3,  //一个入口的最大并行请求数量
            name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔开，如vendor~
            automaticNameDelimiter: '~',//默认webpack将会使用入口名和代码块的名称生成命名,比如 'vendors~main.js'
            cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
                vendors: {
                    chunks: "initial",
                    test: /node_modules/,//条件
                    priority: -10 ///优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中,为了能够让自定义缓存组有更高的优先级(默认0),默认缓存组的priority属性为负值.
                },
                commons: {
                    chunks: "initial",
                    minSize: 0,//最小提取字节数
                    minChunks: 2, //最少被几个chunk引用
                    priority: -20,
                    reuseExistingChunk: true//    如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
                }
            }
        },
}
*/